<template>
	<div class="codemirror-div">
		  <codemirror v-model="sqlval"></codemirror>
	  </div>
  </template>
  <script>
  import "codemirror/theme/ambiance.css";
  import "codemirror/lib/codemirror.css";
  import "codemirror/addon/hint/show-hint.css";
  let CodeMirror = require("codemirror/lib/codemirror");
  require("codemirror/addon/edit/matchbrackets");
  require("codemirror/addon/selection/active-line");
  require("codemirror/mode/sql/sql");
  require("codemirror/addon/hint/show-hint");
  require("codemirror/addon/hint/sql-hint");

  import { codemirror } from "vue-codemirror";
  export default {
	name: 'mycode',
	components:{
		codemirror
	},
	props:{
		sqlValue:{
			type:String,
			require:false,
			default:''
		}
	},
	mounted(){
	  this.$nextTick(()=>{
		this.sqlval = this.sqlValue
	  })
	},
	data(){
		return{
			sqlval:""
		}
	},
	methods:{
		returnSqlVal(){
			return this.sqlval
		},
	}
  }
  </script>
  
<style lang="scss" scoped>
 >>>.CodeMirror-scroll{
	// height: auto !important;
 }
</style>